<template>
  <div class="leftBottom">
    <TITLESS cnt="报警记录统计">
      <!-- <span>设备状态统计 </span> -->
    </TITLESS>
    <Echart :options="chartOptions" height="90%"></Echart>
  </div>
</template>

<script setup>
import {watch, ref} from 'vue';
import TITLESS from "@/components/TITLESS.vue";
import Echart from "@/components/echart/index.vue";

const props = defineProps({
  warnRestore: {
      type: Object,
      default: ()=> { return {
        restoreCount: 43,
        noRestoreCount: 20,
        total: 63
      }}
    },
});

let dataObj = {}
watch(()=> props.warnRestore, (curr) => {
  dataObj = curr
  getDevices()
},{deep: true})

let list = []
// let maxIndex = 0
// let maxData = 0

function getDevices() {
  list = [
    {
      name: "已恢复",
      value: dataObj.restoreCount,
      itemStyle: {
        normal: {
          color: '#00E8F0'
        },
      },
    },
    {
      name: "未恢复",
      value: dataObj.noRestoreCount,
      itemStyle: {
        normal: {
          color: '#FF6E77'
        },
      },
    },
  ];
  // list.forEach((e, i) => {
  //   if (e.value >= maxData) {
  //     maxIndex = i;
  //     maxData = e.value;
  //   }
  // });
  initChart();
}
let chartOptions = ref()
function initChart() {
  chartOptions.value = {
    tooltip: {
      trigger: "item",
      backgroundColor: "#044c73",
      borderColor: "#044c73",
      textStyle: {
        color: "#fff",
      },
      formatter: function (params) {
        return `${params.data.name}：${params.data.value}`;
      },
    },
    title: {
      text: `总数：${dataObj.total}`,
      // bottom: 50,
      top: 60,
      left: 232,
      itemGap: 20,
      textStyle: {
        color: "rgba(209, 234, 255, 1)",
        fontSize: 16,
        fontWeight: 0,
      },
    },
    legend: {
      orient: "vertical",
      top: "center",
      left: 232,
      itemGap: 20,
      textStyle: {
        color: "rgba(209, 234, 255, 1)",
        fontSize: 16,
        fontWeight: 400,
        fontFamily: "Arial",
      },
      formatter: function (name) {
        const item = list.find((i) => {
          return i.name === name;
        });
        let sum = dataObj.total;
        let val = item.value || 0;
        const p = val ? ((item.value / sum) * 100).toFixed(1) : 0;
        return `${name}  ${p}%  (${val}) `;
      },
    },
    series: [
      {
        type: "pie",
        radius: ["0%", "70%"],

        // center: ["25%", "50%"],
        center: ["25%", "52%"],
        avoidLabelOverlap: true,
        itemStyle: {
          borderWidth: 5,
          borderColor: "transparent",
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        selectedMode: "single",
        selectedOffset: 15,
        // 选中的样式
        select: {
          label: {
            show: false,
          },
        },
        data: list,
      },
    ],
  };
}

</script>

<style lang="scss" scoped>
.leftBottom {
  width: 100%;
  height: calc(100% - 45px);
  box-sizing: border-box;
  position: relative;
  color: #b5bcc2;
  font-size: 16px;
  .select {
    position: absolute;
    right: 0;
    top: 60px;
    z-index: 9;
    .title {
      cursor: pointer;
      color: #60aff8;
      border: none;
      align-items: center;
      padding: 0;
      margin-right: 10px;
      font-style: normal;
      font-size: 16px;
      font-weight: 600;
    }
  }
  .top {
    width: 100%;
    display: flex;
    position: absolute;
    justify-content: space-around;
    top: 75px;
    left: 0;
    z-index: 1;
    color: #fff;
    .topL {
      display: flex;
      font-size: 18px;
      &::before {
        content: "";
        width: 15px;
        height: 100%;
        margin-right: 8px;
        background: #1cc9e0;
      }
    }
    .topR {
      display: flex;
      font-size: 18px;

      &::before {
        content: "";
        width: 15px;
        height: 100%;
        margin-right: 8px;
        background: #bb2025;
      }
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    position: absolute;
    justify-content: space-around;
    color: #fff;

    bottom: 20px;
    left: 0;

    z-index: 1;
    .btmL {
      display: flex;
      font-size: 18px;

      &::before {
        content: "";
        width: 15px;
        height: 100%;
        margin-right: 8px;
        background: #97a1ac;
      }
    }
    .btmR {
      display: flex;
      font-size: 18px;

      &::before {
        content: "";
        width: 15px;
        height: 100%;
        margin-right: 8px;
        background: #ffd037;
      }
    }
  }
}
</style>>